<template>
	<view :style="{ padding: '0 ' + value.padding * 2 + 'rpx'}">
		<view class="rich-text-box" :style="{ backgroundColor: value.backgroundColor, marginTop: value.marginTop * 2 + 'rpx' }">
			<rich-text :nodes="html" @click="showImg($event)" :data-nodes="html"></rich-text>
		</view>
	</view>
</template>

<script>
// 富文本
import htmlParser from '@/common/js/html-parser';
export default {
	name: 'diy-rich-text',
	props: {
		value: {
			type: Object
		}
	},
	data() {
		return {
			html: ''
		};
	},
	created() {
		this.html = htmlParser(this.value.html);
	},
	mounted() {},
	methods: {
		showImg(e) {
			//拿到图片的路径里面的内容放在我们数组中
			let contentimg=e.target.dataset.nodes;
			let arrImg=[];
			
			// #ifdef MP-WEIXIN
			for(var i=0;i<contentimg.length;i++){
				var img = contentimg[i].children;
				if(Array.isArray(img)){
					for(var j=0;j<img.length;j++){
						if(img[j].attrs && img[j].name == "img"){
							if(img[j].attrs.src){
								arrImg.push(img[j].attrs.src)
							}
						}
					}
				}else{
					for(var i=0;i<contentimg.length;i++){
						arrImg.push(contentimg[i].attrs.src)
					}
				}
			}
			// #endif
			
			// #ifdef H5
			for(var i=0;i<contentimg.length;i++){
				arrImg.push(contentimg[i].attrs.src)
			}
			// #endif
			
		//最后一步就是把我们的所有图片放在预览的api中就可以了
			this.previewImage(arrImg)
		},
		previewImage(urls){
			console.log(urls);
			uni.previewImage({
				current: urls,
				urls: urls,
			})
		}
	}
};
</script>

<style lang="scss">
.rich-text-box {
	width: 100%;
	// padding: $padding;
	box-sizing: border-box;
	height: auto;
	line-height: 1.5;
	white-space: pre-wrap;
	word-break: break-all;
	border-radius: 10rpx;
}
</style>
